<template>
<!-- <svg xmlns="https://p-pc-weboff.byteimg.com/tos-cn-i-9r5gewecjs/logo-horizontal.svg">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

 <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="#000">
        <path d="./image/logo,svg"/>
		 <path fill="#000" d='./image/logo,svg'/>
        </svg> -->
		
		<div style="width: 100%; height: 12vh; ">
		
		<div class="dylogo" >
			<div style="justify-content: center; align-items: center;  display: flex; position:absolute; width: 8VW; top: 2vh; ">
 <svg width="91" height="34" viewBox="0 0 91 34" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g clip-path="url(#clip0)">
  <path class="cls-4" d="M11.6,13.4v-1.3c-.5,0-.9,0-1.4,0C4.6,12,0,16.6,0,22.3s1.7,6.5,4.4,8.4c-1.7-1.8-2.8-4.3-2.8-7,0-5.6,4.5-10.1,10-10.3Z"/>
            <path class="cls-4" d="M11.9,28.3c2.5,0,4.6-2,4.7-4.5V1.5h4.1c0-.5-.1-.9-.1-1.4h-5.6v22.3c0,2.5-2.1,4.5-4.7,4.5s-1.5-.2-2.2-.5c.9,1.2,2.2,2,3.8,2Z"/>
            <path class="cls-4" d="M28.3,9.1v-1.2c-1.5,0-3-.5-4.2-1.3,1.1,1.2,2.6,2.1,4.2,2.5Z"/>
            <path class="cls-1" d="M24,6.6c-1.2-1.4-1.9-3.1-1.9-5.1h-1.5c.4,2.1,1.7,3.9,3.4,5.1Z"/>
            <path class="cls-1" d="M10.3,17.6c-2.6,0-4.7,2.1-4.7,4.7s1,3.4,2.5,4.1c-.5-.8-.9-1.7-.9-2.7,0-2.6,2.1-4.7,4.7-4.7s.9,0,1.4.2v-5.7c-.5,0-.9,0-1.4,0h-.2v4.4c-.4-.1-.9-.2-1.4-.2Z"/>
            <path class="cls-1" d="M28.3,9.1v4.3c-2.9,0-5.6-.9-7.7-2.5v11.3c0,5.6-4.6,10.3-10.3,10.3s-4.2-.7-5.9-1.9c1.9,2,4.5,3.3,7.5,3.3,5.6,0,10.3-4.6,10.3-10.3v-11.3c2.2,1.6,4.9,2.5,7.7,2.5v-5.6c-.6,0-1.1,0-1.6-.2Z"/>
            <path class="cls-2" d="M20.5,22.3v-11.3c2.2,1.6,4.9,2.5,7.7,2.5v-4.3c-1.7-.4-3.1-1.3-4.2-2.5-1.7-1.1-3-2.9-3.4-5.1h-4.1v22.3c0,2.5-2.1,4.5-4.7,4.5s-3-.8-3.8-1.9c-1.5-.8-2.5-2.3-2.5-4.1,0-2.6,2.1-4.7,4.7-4.7s.9,0,1.4.2v-4.4c-5.5.1-10,4.7-10,10.2s1,5.2,2.8,7c1.7,1.2,3.7,1.9,5.9,1.9,5.6,0,10.2-4.6,10.2-10.2Z"/>
            <path class="cls-2" d="M41.9,6.1h-2.6v3.9h-3.1v2.6h3.1v5.4l-3.1.4v2.8l3.1-.4v4.6c0,.4-.3.7-.7.7h-2.2v2.6h3.3c1.2,0,2.2-1,2.2-2.2v-6.1l2.7-.4v-2.8l-2.7.4v-5h2.7v-2.6h-2.7v-3.9Z"/>
            <path class="cls-2" d="M56.9,6.1h-2.6v13.8l-8.7.8v2.8l8.7-.7v6.2h2.6v-6.5l2.7-.2v-2.8l-2.7.2V6.1Z"/>
            <path class="cls-2" d="M53,9.2l-6.3-1.1v2.8l6.3,1.1v-2.8Z"/>
            <path class="cls-2" d="M53,15l-6.3-1.1v2.8l6.3,1.1v-2.8Z"/>
            <path class="cls-2" d="M81.1,13.8l.4-2.2h-2.8l-.4,2.2h-7.3l-.3-2.2h-2.8l.3,2.2h-5.3v2.6h23.4v-2.6h-5.2Z"/>
            <path class="cls-2" d="M85.6,7.9h-8.9l-.4-1.8h-3.4l.4,1.8h-9.6v2.6h21.9v-2.6Z"/>
            <path class="cls-2" d="M82,18.3h-14.7c-1.2,0-2.2,1-2.2,2.2v6c0,1.2,1,2.2,2.2,2.2h14.7c1.2,0,2.2-1,2.2-2.2v-6c0-1.2-1-2.2-2.2-2.2ZM68.2,20.7h12.8c.4,0,.7.3.7.7v1.1h-14.2v-1.1c0-.4.3-.7.7-.7ZM81,26.4h-12.8c-.4,0-.7-.3-.7-.7v-1.1h14.2v1.1c0,.4-.3.7-.7.7Z"/>
  </g>
  <defs>
  <clipPath id="clip0">
  <rect width="90.6667" height="33.8753" fill="white" transform="translate(-0.000244141 0.125)"/>
  </clipPath>
  </defs>
  </svg>
</div>
</div>



  			<!-- <el-button :icon="Search" color="rgba(255, 255, 255, 0.1))" :dark="isDark">	搜索
  			</el-button> -->
    <div class="custom-input-container">
      <el-input 
        v-model="input"
        placeholder="搜索你感兴趣的内容"
  	  class="hover-border-input"
      >
  <template #append  >

          <el-button :icon="Search"   color="#626aef"  :dark="isDark"  >	搜索
  	</el-button>
        </template>
  	</el-input>
	</div>
	




	<div class="dingyou" >
		
		<!-- <div class="zhengti1"   @mouseenter="show = true" @mouseleave="show = false"> -->
		
		
			<div class="zhengti"    @mouseenter="show1 = true" @mouseleave="show1 = false">
		
		
		
		<div class="tubiao">
	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="2em" height="2rem" focusable="false"
		class="qnMXfrje">
		<path fill-rule="evenodd" clip-rule="evenodd" class="zuanshi"
			d="M12.8013 19.9762C12.3693 20.4436 11.6307 20.4436 11.1986 19.9762L3.11756 11.2346C2.74913 10.8361 2.72958 10.2274 3.07168 9.80599L6.92716 5.05714C7.13438 4.8019 7.44562 4.65369 7.77439 4.65369H16.2256C16.5544 4.65369 16.8656 4.8019 17.0728 5.05714L20.9283 9.80599C21.2704 10.2274 21.2508 10.8361 20.8824 11.2346L12.8013 19.9762ZM4.45944 10.4765L12 18.6334L19.5405 10.4765L16.031 6.15369H7.96901L4.45944 10.4765ZM16.0867 9.09336L16.0954 10.4557C15.3615 10.4557 14.6822 10.2315 14.1281 9.85065V12.5739C14.1281 13.9502 12.964 15.0659 11.5281 15.0659C10.0922 15.0659 8.9281 13.9502 8.9281 12.5739C8.9281 11.1976 10.0922 10.0819 11.5281 10.0819C11.6486 10.0819 11.7672 10.0897 11.8834 10.1049V11.4964C11.7713 11.4625 11.6519 11.4442 11.5281 11.4442C10.8771 11.4442 10.3494 11.95 10.3494 12.5739C10.3494 13.1978 10.8771 13.7036 11.5281 13.7036C12.179 13.7036 12.7067 13.1978 12.7067 12.5739V7.21604H14.1281C14.1281 8.25285 15.005 9.09336 16.0867 9.09336Z"
			fill="currentColor"></path>
	</svg>
      </div>
	<p class="ziti">充钻石</p>
	
	<transition name="el-zoom-in-top" >
	  <div v-show="show1"  class="transition-box">.el-zoom-in-top</div>
	</transition>
</div>
	
		
			<div class="zhengti"   @mouseenter="show2 = true" @mouseleave="show2 = false">
					<div class="tubiao">
<svg  viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" focusable="false"
		class="qnMXfrje" style="font-size: 24px;">
		<path fill-rule="evenodd" clip-rule="evenodd" d="M18 18.75H6V17.25H18V18.75Z" fill="currentColor" class="zuanshi"></path>
		<path fill-rule="evenodd" clip-rule="evenodd" class="zuanshi"
			d="M11.25 13.1893V5H12.75V13.1893L15.9697 9.96967L17.0303 11.0303L12.5303 15.5303C12.2374 15.8232 11.7626 15.8232 11.4697 15.5303L6.96967 11.0303L8.03033 9.96967L11.25 13.1893Z"
			fill="currentColor"></path>
	</svg>
</div>
	<p class="ziti">客户端</p>
	
	
	<transition name="el-zoom-in-top" >
	  <div v-show="show2"  class="transition-box">.el-zoom-in-top</div>
	</transition>
</div>


<div class="zhengti"  @mouseenter="show3 = true" @mouseleave="show3 = false">
					<div class="tubiao">
	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" focusable="false">
		<path fill-rule="evenodd" clip-rule="evenodd" class="zuanshi"
			d="M9.10335 4.79386C8.86882 4.64984 8.57425 4.64585 8.3359 4.78346C8.09755 4.92108 7.95372 5.17818 7.96117 5.4533L8.05873 9.05336L5.31808 11.3898C5.10864 11.5683 5.01381 11.8473 5.07104 12.1165C5.12826 12.3857 5.32833 12.6019 5.59229 12.6798L9.0463 13.6995L10.4215 17.028C10.5266 17.2824 10.7625 17.4588 11.0362 17.4875C11.3099 17.5163 11.5774 17.3929 11.7331 17.1659L13.3237 14.8471L16.4638 19.3577L17.6949 18.5007L14.6505 14.1276L17.3608 13.9168C17.6352 13.8954 17.8758 13.7255 17.9878 13.4741C18.0997 13.2226 18.065 12.9301 17.8972 12.7119L15.7022 9.85673L16.5462 6.35562C16.6107 6.08806 16.5234 5.80667 16.3189 5.62251C16.1144 5.43835 15.8254 5.38101 15.566 5.47312L12.1723 6.67838L9.10335 4.79386ZM9.56789 9.37117L9.49812 6.79649L11.693 8.14425C11.8862 8.26291 12.1227 8.28777 12.3364 8.21188L14.7635 7.34991L14.16 9.85382C14.1068 10.0743 14.1563 10.3069 14.2945 10.4867L15.8643 12.5286L13.2964 12.7284C13.0704 12.746 12.8644 12.8649 12.7361 13.0519L11.2792 15.1758L10.2957 12.7954C10.2091 12.5858 10.0324 12.4267 9.81491 12.3624L7.34469 11.6332L9.30473 9.96224C9.47729 9.81513 9.57403 9.59784 9.56789 9.37117Z"
			fill="currentColor"></path>
	</svg>

</div>
	<p class="ziti">壁纸</p>

	<transition name="el-zoom-in-top" >
	  <div v-show="show3"  class="transition-box">.el-zoom-in-top</div>
	</transition>
	
</div>


<div class="zhengti" @mouseenter="show4 = true" @mouseleave="show4 = false">
					<div class="tubiao">
	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" focusable="false"
		class="Df5pRYjC">
		<path fill-rule="evenodd" clip-rule="evenodd"class="zuanshi"
			d="M11.9998 4.50037C9.02034 4.50037 6.55167 6.81159 6.35561 9.78463L5.94855 15.9572H18.0507L17.6441 9.78506C17.4482 6.81184 14.9795 4.50037 11.9998 4.50037ZM7.85236 9.88334C7.99643 7.6987 9.81045 6.00037 11.9998 6.00037C14.1893 6.00037 16.0034 7.69888 16.1473 9.88365L16.4486 14.4572H7.55073L7.85236 9.88334Z"
			fill="currentColor"></path>
		<path d="M9.75056 19.1392H14.2506V17.6392H9.75056V19.1392Z" fill="currentColor" class="zuanshi"></path>
	</svg>
</div>
	<p class="ziti">通知</p>
	
	<transition name="el-zoom-in-top" >
	  <div v-show="show4"  class="transition-box">.el-zoom-in-top</div>
	</transition>
</div>


<div class="zhengti" @mouseenter="show5 = true" @mouseleave="show5 = false" >
					<div class="tubiao">
	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" focusable="false"
		class="Df5pRYjC">
		<path d="M9.75 10.5001H11.25V12.0001H9.75V10.5001Z" fill="currentColor" class="zuanshi"></path>
		<path d="M13.4999 10.5003H14.9999V12.0003H13.4999V10.5003Z" fill="currentColor" class="zuanshi"></path>
		<path fill-rule="evenodd" clip-rule="evenodd" class="zuanshi"
			d="M12.3751 4.5C8.44033 4.5 5.25069 7.68926 5.25008 11.6239L5.25008 11.625H6.00008L5.25008 11.6239C5.24846 12.6998 5.49149 13.7608 5.95925 14.727L5.01221 18.9879L9.27309 18.0408C10.2391 18.5085 11.2999 18.7515 12.3756 18.75C16.3105 18.7497 19.5001 15.5599 19.5001 11.625C19.5001 7.68987 16.3102 4.5 12.3751 4.5ZM6.75008 11.625C6.75008 8.5183 9.26838 6 12.3751 6C15.4818 6 18.0001 8.5183 18.0001 11.625C18.0001 14.7317 15.4818 17.25 12.3751 17.25H12.3739C11.4505 17.2514 10.5411 17.0243 9.7267 16.5889L9.48163 16.4579L6.98795 17.0121L7.5422 14.5184L7.41119 14.2734C6.97581 13.459 6.74869 12.5496 6.75008 11.6261L6.75008 11.625Z"
			fill="currentColor"></path>
	</svg>
	
	</div>
		<p class="ziti">私信</p>
		<transition name="el-zoom-in-top" >
		  <div v-show="show5"  class="transition-box">.el-zoom-in-top</div>
		</transition>
	</div>
	
	
	
	
	<div class="zhengti" @mouseenter="show6 = true" @mouseleave="show6 = false">
						<div class="tubiao">
	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" focusable="false"
		class="qnMXfrje">
		<path fill-rule="evenodd" clip-rule="evenodd" class="zuanshi"
			d="M11.3487 4.90125H11.3164H11.3164C10.2479 4.90124 9.40104 4.90124 8.71799 4.95587C8.01959 5.01173 7.42807 5.12824 6.88626 5.39747C5.95866 5.8584 5.20716 6.60991 4.74622 7.53751C4.477 8.07932 4.36048 8.67084 4.30462 9.36923C4.24999 10.0523 4.24999 10.8991 4.25 11.9677V12V12.0322C4.24999 13.1008 4.24999 13.9477 4.30462 14.6307C4.36048 15.3291 4.477 15.9206 4.74622 16.4624C5.20716 17.39 5.95866 18.1415 6.88626 18.6025C7.42807 18.8717 8.01959 18.9882 8.71799 19.0441C9.40104 19.0987 10.2479 19.0987 11.3164 19.0987H11.3487H12.6513H12.6836C13.7521 19.0987 14.599 19.0987 15.282 19.0441C15.9804 18.9882 16.5719 18.8717 17.1137 18.6025C18.0413 18.1415 18.7928 17.39 19.2538 16.4624C19.523 15.9206 19.6395 15.3291 19.6954 14.6307C19.75 13.9477 19.75 13.1008 19.75 12.0322V12V11.9677C19.75 10.8991 19.75 10.0523 19.6954 9.36923C19.6395 8.67084 19.523 8.07932 19.2538 7.53751C18.7928 6.60991 18.0413 5.8584 17.1137 5.39747C16.5719 5.12824 15.9804 5.01173 15.282 4.95587C14.599 4.90124 13.7521 4.90124 12.6836 4.90125H12.6513H11.3487ZM7.55376 6.74077C7.8529 6.59212 8.22981 6.4997 8.83757 6.45109C9.45382 6.4018 10.2407 6.40125 11.3487 6.40125H12.6513C13.7593 6.40125 14.5462 6.4018 15.1624 6.45109C15.7702 6.4997 16.1471 6.59212 16.4462 6.74077C17.0809 7.05614 17.5951 7.57033 17.9105 8.205C18.0591 8.50414 18.1515 8.88105 18.2002 9.48882C18.2494 10.1051 18.25 10.8919 18.25 12C18.25 13.108 18.2494 13.8949 18.2002 14.5111C18.1515 15.1189 18.0591 15.4958 17.9105 15.7949C17.5951 16.4296 17.0809 16.9438 16.4462 17.2592C16.1471 17.4078 15.7702 17.5002 15.1624 17.5488C14.5462 17.5981 13.7593 17.5987 12.6513 17.5987H11.3487C10.2407 17.5987 9.45382 17.5981 8.83757 17.5488C8.22981 17.5002 7.8529 17.4078 7.55376 17.2592C6.91909 16.9438 6.4049 16.4296 6.08952 15.7949C5.94088 15.4958 5.84846 15.1189 5.79985 14.5111C5.75056 13.8949 5.75 13.108 5.75 12C5.75 10.8919 5.75056 10.1051 5.79985 9.48882C5.84846 8.88105 5.94088 8.50414 6.08952 8.205C6.4049 7.57033 6.91909 7.05614 7.55376 6.74077ZM11.25 15V12.75H9V11.25H11.25V8.99997H12.75V11.25H15V12.75H12.75V15H11.25Z"
			fill="currentColor"></path>
	</svg>


	</div>
		<p class="ziti">投稿</p>
		
		<transition name="el-zoom-in-top" >
		  <div v-show="show6"  class="transition-box">.el-zoom-in-top</div>
		</transition>
	</div>
	
	
	


<div  @mouseenter="show7 = true" @mouseleave="show7 = false">
  
  <el-button type="primary"  color="rgba(254,44,85)" style="  width: 7rem;  height: 3rem; border-radius: 15px; " >
	  
	  
	  <svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" fill="none" class="" viewBox="0 0 20 20"
	  	id="svg_icon_avatar">
	  	<rect width="20" height="20" rx="10" fill="#fff" fill-opacity=".3"></rect>
	  	<path
	  		d="M2.494 16.607A9.976 9.976 0 0 1 10 13.214a9.976 9.976 0 0 1 7.507 3.393A9.976 9.976 0 0 1 10 20a9.976 9.976 0 0 1-7.506-3.393zM13.572 8.214a3.571 3.571 0 1 1-7.143 0 3.571 3.571 0 0 1 7.143 0z"
	  		fill="#fff"></path>
	  </svg>登录</el-button>
	  
<transition name="el-zoom-in-top" >
		  <div v-show="show7"  class="transition-box-login">.el-zoom-in-top</div>
		</transition>

</div>
   </div>


 
  <div class="chong">
  <el-card  >
    <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
  </el-card>
  </div>
 
<!--  
   <div class="hover-container">
      鼠标移入我
     <div class="popup">
        这里是弹窗内容
      </div>
    </div>
  -->

  <!-- <el-button @mouseenter="show = !show">Click Me</el-button> -->
<!-- <el-button @mouseenter="show = !show">Click Me </el-button> -->
 

  
  
  
  
 
  
<!-- 
 <div v-for="(box, id) in boxes" :key="id" class="hover-group">
      <el-button 
        @mouseenter="box.show = true"
        @mouseleave="box.show = false"
      >
	  aa
       {{ box.title }}
      </el-button>
   
      <transition name="el-zoom-in-top">
        <div 
          v-show="box.show"
          class="transition-box"
          :style="{ top: `${30 * id}px` }"
        >
          {{ box.content }}
        </div>
      </transition>
    </div>
  -->
 
  
<!--   <div v-for="(box, id) in boxes" :key="id" class="hover-group">
        <el-button 
          @mouseenter="box.show = true"
          @mouseleave="box.show = false"
        >
  
         {{ box.title }}
		 {{ box.svg1 }}
        </el-button>
     
        <transition name="el-zoom-in-top">
          <div 
            v-show="box.show"
            class="transition-box"
            :style="{ top: `${30 * id}px` }"
          >
            {{ box.content }}
          </div>
        </transition>
      </div>
	  -->
	  
	  
	  
   
   
<!-- 
  <div v-for="box in boxes" :key="box.id" >
       <el-button 
         @mouseenter="box.id.show = true"
         @mouseleave="box.id.show = false"
       >
         {{ box.title }}
       </el-button>
    
       <transition name="el-zoom-in-top">
         <div 
           v-show="activeId === box.id	"
           class="transition-box"
           :style="{ top: `${30 * box.index}px` }"
         >
           {{ box.content }}
         </div>
       </transition>
     </div>
   
 -->
  
  
  

  
  
  </div>
  
  
  
  
</template>



<script setup>
//import { Calendar, Search } from '@element-plus/icons-vue'
import { Calendar, Search } from '@element-plus/icons-vue'
import { ref } from 'vue'
const show1 = ref(false)
const show2 = ref(false)
const show3 = ref(false)
const show4 = ref(false)
const show5 = ref(false)
const show6 = ref(false)
const show7 = ref(false)
const input = ref('')
//import dong from '../js/dong.js'


</script>

<style  scoped>
	
	
	
	.dylogo{
		display:flex;
		cursor: pointer; 
		position: fixed;  
		height: 8vh; 
		width: 12vw; 
		background-color: rgb(22, 24, 35);
		top: 0%;
	}
	
	
	
	.transition-box {

	  margin-bottom: 10px;
	  width: 200px;
	  height: 100px;
	  border-radius: 4px;
	  background-color: #409eff;
	  text-align: center;
	  color: #fff;
	  padding: 40px 20px;
	  box-sizing: border-box;
	  margin-right: 20px;
	    transition: all 0.3s;
	}
	


	
	.transition-box-login {
	position: absolute; 
	 margin-bottom: 10px;
	  width: 200px;
	  height:300px;
	  border-radius: 4px;
	  background-color: #409eff;
	  text-align: center;
	  color: #fff;
	  padding: 40px 20px;
	  box-sizing: border-box;
	  margin-right: 20px;
	    transition: all 0.3s;
		right: -0.5vw;
	
	}
	
	
	
	
	

	
	
.hover-container {
  position: relative; /* 确保弹窗定位正确 */
}
.hover-container:hover .popup {
  display: block; /* 当鼠标移入时显示 */
}

.popup {
  position: absolute; /* 或者其他定位方式 */
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  display: none; /* 初始时隐藏 */
}



	.chong{
		max-width: 480px;
		position: absolute; /* 或者其他定位方式 */
		background-color: white;
		border: 1px solid #ccc;
		padding: 10px;
		display: none; /* 初始时隐藏 */
	}
	
	.dingyou{
			  display: flex;
		position: fixed;
		top: 1%;
		right: 1%;
		justify-content: space-around; /* 图标均匀分布 */
		width: 25vw;
		height: 12vh;
	
	
	}
	
	.zhengti{
		

		filter: brightness(60%);
		  display: flex;
		  flex-direction: column;
		      align-items: center;
			margin: 0;
		  padding: 0;
		width: 3rem;
		height: 3rem;
			cursor: pointer;
	}
	.zhengti:hover{
		filter: brightness(100%);

	}
	
	

.tubiao{
	  display: flex;
	    width: 2rem;
	    height: 2rem;
		margin: 0;
		padding: 0;
}

	.zuanshi {
		  display: flex;
	  fill: #ffffff;
	
	}
	
	
	.ziti{
	
		font-size: 0.7rem;
		color: #e7e7e7;
		margin: 0;

	}
	

	.cls-1 {
	  fill: #ff0050;
	}
	  
	.cls-2 {
	  fill: #fff;
	}
	  
	.cls-3 {
	  fill: none;
	}
	  
	.cls-4 {
	  fill: #00faf0;
	}
	  
	.cls-5 {
	  clip-path: url(#clippath);
	}
	
	

	/* 使用深度选择器覆盖 element plus 默认样式 */
	:deep(.hover-border-input) .el-input__wrapper {
	/*  background-color: #f5f5f5; */
	  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset; /* 默认边框 */
	   background: rgba(255, 255, 255, 0.1); /* 半透明白色背景 */
	   	  	height: 5vh;
			border-radius: 15px 0 0 15px;
	}
	
	/* 鼠标悬停状态 */
	:deep(.hover-border-input) .el-input__wrapper:hover {
	  box-shadow: 0 0 0 1px #fff inset !important; /* 悬停白色边框 */
	  /* background-color: rgb(22, 24, 35); */
		border-radius: 15px 0 0 15px;
	}
	 
	/* 聚焦状态保持白色边框 */
	/* :deep(.hover-border-input) .el-input__wrapper.is-focus {
	  box-shadow: 0 0 0 1px #00ff00 inset !important;
	} */
	
	/* 失去聚焦状态边框 */
	:deep(.hover-border-input) .el-input__wrapper.is-focus {
	  box-shadow: 0 0 0 1px #ffffff inset !important;
	 border-radius: 15px 0 0 15px;
	}
	
	 
	 
	/* 可选：添加发光效果 */
	.custom-input-container {
		
		
	/* 	 display:flex;
		justify-content: center; /* 水平居中 */
	/* 	align-items: center;     /* 垂直居中 */
	/* 	margin: 0; */ 
		  position: fixed;
		  top: 0.5rem;
		  left: 50%;
		  transform: translateX(-50%);
	/* 	 max-width: 400px; */
		  	  width: 30VW;
		
	 
	
	/*  padding: 2px;
	 background: rgba(255, 255, 255, 0.1); 
	  border-radius: 6px;
	  transition: all 0.3s ease; */
	  
	  
	}
	 
	.custom-input-container:hover {
	  /* background: linear-gradient(145deg, #ffffff); */
	  background: rgba(255, 255, 255, 0); /* 半透明白色背景 */
	  
	}
	


	
	

 
/* 如果按钮在append插槽中需要额外调整 */
::v-deep(.el-input-group__append) {
  padding: 0;  /* 移除默认padding避免影响圆角效果 */
  border-radius:  0  15px  15px 0 !important;  /* 圆角大小可调 */
  padding: 8px 20px;  /* 可选：调整内边距使圆形更自然 */
}
	
	


	
</style>